<template>
  <div>
    <h5>基本信息</h5>
    <el-row class="info-container">
      <el-col :span="12">
        <div class="info-block">
          <label>应用名称：</label>
          <span>{{ data?.appName }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>所属部门：</label>
          <span>{{ data?.orgName ?? '暂无' }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>服务商：</label>
          <span>{{ data?.provider ?? '暂无' }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>联系人：</label>
          <span>{{ data?.contact ?? '暂无' }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>联系电话：</label>
          <span>{{ data?.tel ?? '暂无' }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>联系邮箱：</label>
          <span>{{ data?.email ?? '暂无' }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>健康接口：</label>
          <span>{{ data?.healthUrl ?? '暂无' }}</span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>健康状态：</label>
          <span>
           
            <el-tag
                v-if="data.healthState"
                :type="healthStateList?.[data.healthState]?.type"
                class="status-tag"
              >
              {{healthStateList?.[data.healthState]?.text}}
              </el-tag>
              <span v-else>暂无</span>
          </span>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="info-block">
          <label>IP白名称：</label>
          <span>{{ data?.ips ?? '暂无' }}</span>
        </div>
      </el-col>
       <el-col :span="24">
        <div class="info-block">
          <label>描述：</label>
          <span>{{ data?.memo ?? '暂无' }}</span>
        </div>
      </el-col>
    </el-row>

    
  </div>
</template>

<script lang="jsx">
import { defineComponent, watch, computed, ref } from "vue";


export default defineComponent({
  name: "APPDetailInfo",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },

  setup(props, { emit }) {
    const healthStateList = ref({
      "0":
      {
        type:"warning",
        text: '异常'
      },
      "1":{
        type:"success",
        text: '健康'
      },
      "2":{
        type:"",
        text: '未配置'
      }
    })
    return {
      healthStateList
    };
  },
});
</script>

<style lang="scss" scoped>
.info-container {
  padding: 15px 0;
  padding-left: 10px;
  .el-col {
    margin-bottom: 15px;
  }
  .info-block {
    >label {
      font-size: 14px;
      font-weight: 600;
      color: #3c475d;
      line-height: 20px;
    }
    >span {
      font-size: 14px;
      font-weight: 400;
      color: #3c475d;
      line-height: 20px;
    }
  }
}
h5 {
  margin: 20px 0;
  margin-top: 0;
  border-left: 4px solid #2e69eb;
  height: 16px;
  line-height: 18px;
  padding-left: 10px;
}
.introduction {
  text-align: center;
  img {
    width: 100%;
    max-width: 800px;
    height: auto;
    min-height: 100px;
  }
  p {
    text-align: left;
  }
}
p {
  line-height: 2em;
  text-indent: 2em;
}
.table-container {
  height: 200px;
}
</style>
